<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/jquery.textcomplete.css' />
    <link rel="stylesheet" href="/stylesheets/side-menu.css">
    <link rel="stylesheet" href="/stylesheets/jquery-ui.min.css">
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <script src="/javascripts/cleave.min.js"></script>
    <% include statsheader %>
</head>
<body>
<% include statsabove %>
<div id="layout">
    <!-- Menu toggle -->
    <a href="#menu" id="menuLink" class="menu-link">
        <!-- Hamburger icon -->
        <span></span>
    </a>

    <%- include('components/common/menu') %>

    <div id='content'>

        <div id='welcomemessage'>

            Visualize the news of the day (or any set of RSS feeds):

            <% include messages %>

            <form action='/importrss' name='submitform' id="submitform" method='post' class='pure-form pure-form-stacked'>
                    <br>

                    <!-- This hidden input becomes unnecessary when using different endpoints for different import types -->
                    <input type="hidden" name="source" value="rss">

                    <select name="urlselect" id="urlselect">
                      <% for (var item in rsspresets) { %>
                        <option value="<%= rsspresets[item]['id'] %>"><%= rsspresets[item]['name'] %></option>
                      <% } %>
                      <option value="custom">Custom RSS feeds</option>

                    </select>
                    <br>
                    <a href="javascript:" id="advancedpane">+ settings</a>
                    <br>
                    <div id="urlsetting">
                      <br>
                        RSS feeds to be visualized:
                        <textarea id="rssinput" name="rssinput" rows="4" cols="20">
                          <%= rsspresets[Object.keys(rsspresets)[0]]['urls'].join(' ') %>
                        </textarea>
                        <br>
                        <label for="rssitems" class="pure-input" id="rssitemscaption">
                            # of items for each feed:
                            <input type="text" name="rssitems" id="rssitems" value="<%= rsspresets[Object.keys(rsspresets)[0]]['items'] %>"/>
                        </label>
                        <br>
                        <label for="rsssince" class="pure-input" id="rsssincecaption">
                            Published after yyyy-mm-dd hh:mm (optional):
                            <input type="text" name="rsssince" id="rsssince" value="" placeholder="YYYY-MM-DD HH:MI"/>
                        </label>
                        <br>
                        <label for="includeteasers" class="pure-checkbox">
                            <input id="includeteasers" type="checkbox" name="includeteasers" value="1"> include teasers
                        </label>
                        <br>

                    </div>

                <br>
                Save in Context:
                <br>
                <input type='text' name='context' id="context" value='<% if (context) { %><%= context %><% } else { %>news<% } %>'/>
                <br>

                <!-- TODO: Unclear if/why these two hidden inputs are necessary... Not referenced anywhere in the import code -->
                <input type="hidden" id="selectedContexts" name="selectedContexts" value="">
                <input type="hidden" name="statementid" value="">

                &nbsp;<br>
                <input type='submit' name="submit" value="save" class="pure-button pure-button-primary">
                <br>
                <div id="message"></div>

            </form>   &nbsp;<br>&nbsp;<br>

        </div>

        <div id="graph-container"></div>

    </div>

</div>


<script src="/javascripts/jquery.min.js"></script>
<script src="/javascripts/jquery-ui.min.js"></script>
<script src="/javascripts/string.min.js"></script>
<script src="/javascripts/underscore-min.js"></script>
<script src="/javascripts/jquery.textcomplete.js"></script>
<script src='/javascripts/jquery.autosize.js'></script>
<script src="/javascripts/ui.js"></script>
<script src="/javascripts/jquery.mobile-events.min.js"></script>


<script>
      $(document).ready(function () {
          var nowdate = new Date().toISOString().slice(2,10).replace(/-/g,"").replace(/:/g,"");
          $('#context').val('news' + nowdate);

          var advancedpane = 0;

          $("#advancedsettings").hide();
          $('#urlsetting').hide();

          var clientRssPresets = JSON.parse('<%- JSON.stringify(rsspresets) %>');

          $("#advancedpane").click(function() {
              if (!advancedpane) {
                  $("#advancedpane").text('– settings');
                  $("#urlsetting").show();
                  advancedpane = 1;
              }
              else {
                  $("#advancedpane").text('+ settings');
                  $("#urlsetting").hide();
                  advancedpane = 0;
              }
          });

          $('#urlselect').change(function () {
            var currentselection = $(this).val();
            $('#context').val(currentselection + nowdate);

            if (currentselection == 'custom') {
              $('#rssinput').val('');
              $('#urlsetting').show();
              $('#advancedpane').text('– settings');
              advancedpane = 1;
            }
            else if (currentselection in clientRssPresets) {
              $('#rssinput').val(clientRssPresets[currentselection]['urls'].join(' '));
              $('#rssitems').val(clientRssPresets[currentselection]['items']);
              $('#urlsetting').show();
              $('#advancedpane').text('– settings');
              advancedpane = 1;
            }
          });

          $('form#submitform').submit(function(){
                $(this).find('input[type=submit]').attr('disabled', 'disabled');
                $('#message').html('We are importing the data, this page will automatically reload. If this does not happen in 30 seconds, please, <a href="/<%= user.name %>/'+$('#context').val()+'/edit">click here</a>.');
          });

          new Cleave('#rsssince', {
            uppercase: true,
            delimiters: ['-', '-', ' ', ':'],
            blocks: [4, 2, 2, 2, 2]
        });

      });
</script>

<% include statsbelow %>
</body>
</html>
